<template>
  <div class="el-wrap">
    <!-- <div class="el-title el-text-c">{{ $route.query.courseName }}</div> -->
    <div class="el-courseware-box">
      <div class="el-courseware-left">
        <CourseChapter />
      </div>
      <div class="el-courseware-right">
        <div class="el-attend-box">
          <el-form :inline="true" :model="studentParam" class="demo-form-inline">
            <el-form-item label="老师">
              <el-select v-model="studentParam.stuAttendUserId" placeholder="选择老师">
                <el-option label="全部" value />
                <el-option
                  v-for="(item, k) in teacherDatas"
                  :key="k"
                  :label="item.teacherName"
                  :value="item.courseTeachUserId"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="班级">
              <el-select v-model="studentParam.stuAttendClass" placeholder="选择班级">
                <el-option label="全部" value />
                <el-option
                  v-for="(item, k) in classDatas"
                  :key="k"
                  :label="item.class_name"
                  :value="item.class_name"
                />
              </el-select>
            </el-form-item>
            <!-- <el-form-item><el-button type="primary" @click="formParamSubmit">查询</el-button></el-form-item> -->
          </el-form>
          <el-table
            ref="multipleTable"
            :data="studentDatas"
            tooltip-effect="dark"
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column label="学生ID" prop="stuUserId" align="center" />
            <el-table-column label="学生名称" prop="stuAttendName" align="center" />
            <el-table-column label="未到" align="center">
              <template slot-scope="scope">
                <i
                  v-if="scope.row.stuAttendState != 1"
                  class="el-attend-btn el-icon-close el-color-error"
                />
                <!-- <i v-else class="el-icon-close"></i> -->
              </template>
            </el-table-column>
            <el-table-column label="已到" align="center" width="80px">
              <template slot-scope="scope">
                <i
                  v-if="scope.row.stuAttendState == 1"
                  class="el-attend-btn el-icon-check el-color-right"
                />
                <!-- <i v-else class="el-icon-close"></i> -->
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 15]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageTotals"
            ></el-pagination>
          </div>
          <div
            class="el-table-bottom"
          >汇总：累计{{ statistics.signin }}个人签到，{{ statistics.absence }}个人未签到；</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { selectCourseTeachList } from "@/api/teach.js";
import { getClassByGrade } from "@/api/basic.js";
import { selectStuAttendlist } from "@/api/attend.js";
import CourseChapter from "@/components/Course/CourseChapter/index.vue";
export default {
  components: {
    CourseChapter
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 1,
      pageTotals: 0,
      pageCurrent: 10,
      teacherDatas: [],
      classDatas: [],
      studentParam: {
        courseCatalogId: this.$route.query.courseCatalogId || null, // 课程章节
        stuAttendUserId: "", // 老师ID
        stuAttendClass: "" // 班级名称
      },
      studentDatas: [],
      statistics: {
        signin: 0, // 签到总数
        absence: 0 // 未到总数
      }
    };
  },
  created() {
    this.getDatas();
  },
  watch: {
    studentParam: {
      handler() {
        this.selectStuAttendlist();
      },
      deep: true
    },
    $route: {
      handler() {
        this.studentParam.courseCatalogId = this.$route.query.courseCatalogId;
        this.selectStuAttendlist();
      },
      deep: true
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageCurrent = val
      this.selectStuAttendlist()
    },
    handleCurrentChange(val) {
      this.pageSize = val
      this.selectStuAttendlist()
    },
    getDatas() {
      this.selectCourseTeachList();
      this.getClassByGrade();
      if (this.studentParam.courseCatalogId) {
        this.selectStuAttendlist();
      }
    },
    selectCourseTeachList() {
      // 获取授课老师列表
      selectCourseTeachList({
        courseId: this.$route.query.courseId
      }).then(response => {
        if (response.code === 20000 || response.code === 200) {
          // 对老师进行去重
          var obj = {};
          this.teacherDatas = response.data.reduce(function(item, next) {
            obj[next.courseTeachUserId]
              ? ""
              : (obj[next.courseTeachUserId] = true && item.push(next));
            return item;
          }, []);
        } else {
          this.$message({
            type: "info",
            message: "班级获取失败"
          });
        }
      });
    },
    getClassByGrade() {
      // 获取班级列表
      getClassByGrade().then(response => {
        if (response.code === 20000 || response.code === 200) {
          this.classDatas = response.data;
        } else {
          this.$message({
            type: "info",
            message: "班级获取失败"
          });
        }
      });
    },
    selectStuAttendlist() {
      // 获取考勤学生列表
      selectStuAttendlist(this.studentParam).then(response => {
        if (response.code === 20000 || response.code === 200) {
          this.pageTotals = response.data.length
          this.studentDatas = response.data.slice((this.pageSize-1)*this.pageCurrent,this.pageSize*this.pageCurrent);
          this.statistics.signin = response.total;
          this.statistics.absence = response.data.length - response.total;
        } else {
          this.$message({
            type: "info",
            message: "学生获取失败"
          });
        }
      });
    },
    formParamSubmit() {}
  }
};
</script>
<style lang="scss" src="./index.scss"></style>
